<template>
  <div class="user-detail-container">
    <div class="header">
      <button class="back-button" @click="goBack">返回</button>
      <h1>用户详情</h1>
    </div>
    
    <div v-if="loading" class="loading">加载中...</div>
    
    <div v-else-if="error" class="error-message">
      <p>{{ error }}</p>
      <button class="retry-button" @click="fetchUserInfo">重试</button>
    </div>
    
    <div v-else class="user-info">
      <div class="info-layout">
        <!-- 左侧：基本信息 -->
        <div class="info-column left-column">
          <div class="info-section">
            <h2>基本信息</h2>
            <div class="info-card">
              <div class="info-item">
                <span class="label">用户ID：</span>
                <span class="value">{{ userId }}</span>
              </div>
              <div class="info-item">
                <span class="label">用户名：</span>
                <span class="value">{{ userInfo.name || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">基金代码：</span>
                <span class="value">{{ userInfo.fundCode || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">基金名称：</span>
                <span class="value">{{ userInfo.fundName || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">当前价格：</span>
                <span class="value">{{ userInfo.curPrice || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">最新价格：</span>
                <span class="value">{{ userInfo.latestPrice || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">价格日期：</span>
                <span class="value">{{ userInfo.priceDate || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">模拟日期：</span>
                <span class="value">{{ userInfo.simDate || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">开始日期：</span>
                <span class="value">{{ userInfo.startDate || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">天数：</span>
                <span class="value">{{ userInfo.days || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">周数：</span>
                <span class="value">{{ userInfo.weeks || '暂无数据' }}</span>
              </div>
            </div>
          </div>
          
          <!-- 左下方：投资建议 -->
          <div class="info-section" v-if="userInfo.advice">
            <h2>投资建议</h2>
            <div class="info-card">
              <div class="info-item">
                <span class="label">是否存在固定买入：</span>
                <span class="value">{{ userInfo.advice.existFixBuy ? '是' : '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">是否存在价格日志买入：</span>
                <span class="value">{{ userInfo.advice.existPriceLogBuy ? '是' : '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">是否存在价格日志卖出：</span>
                <span class="value">{{ userInfo.advice.existPriceLogSell ? '是' : '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">是否存在利润卖出：</span>
                <span class="value">{{ userInfo.advice.existProfitSell ? '是' : '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">是否存在短期买入：</span>
                <span class="value">{{ userInfo.advice.existShortBuy ? '是' : '否' }}</span>
              </div>
            </div>
        
        <!-- 固定买入建议 -->
        <div class="sub-section" v-if="userInfo.advice.fixBuyDeal">
          <h3>固定买入建议</h3>
          <div class="info-card">
            <div class="info-item">
              <span class="label">建议类型：</span>
              <span class="value">{{ userInfo.advice.fixBuyDeal.adviceType || '暂无数据' }}</span>
            </div>
            <div class="info-item">
              <span class="label">交易金额：</span>
              <span class="value">{{ userInfo.advice.fixBuyDeal.dealAmount || '暂无数据' }}</span>
            </div>
          </div>
        </div>
        
        <!-- 价格日志买入建议 -->
        <div class="sub-section" v-if="userInfo.advice.priceLogBuys && userInfo.advice.priceLogBuys.length > 0">
          <h3>价格日志买入建议</h3>
          <div class="info-card" v-for="(item, index) in userInfo.advice.priceLogBuys" :key="'buy-'+index">
            <div class="info-item">
              <span class="label">建议类型：</span>
              <span class="value">{{ item.adviceType || '暂无数据' }}</span>
            </div>
            <div class="info-item">
              <span class="label">交易金额：</span>
              <span class="value">{{ item.dealAmount || '暂无数据' }}</span>
            </div>
          </div>
        </div>
        
        <!-- 价格日志卖出建议 -->
        <div class="sub-section" v-if="userInfo.advice.priceLogSells && userInfo.advice.priceLogSells.length > 0">
          <h3>价格日志卖出建议</h3>
          <div class="info-card" v-for="(item, index) in userInfo.advice.priceLogSells" :key="'sell-'+index">
            <div class="info-item">
              <span class="label">建议类型：</span>
              <span class="value">{{ item.adviceType || '暂无数据' }}</span>
            </div>
            <div class="info-item">
              <span class="label">交易金额：</span>
              <span class="value">{{ item.dealAmount || '暂无数据' }}</span>
            </div>
          </div>
        </div>
          </div>
        </div>
        
        <!-- 中间：账户信息 -->
        <div class="info-column middle-column" v-if="userInfo.accounts && userInfo.accounts.length > 0">
          <div class="info-section">
            <h2>账户信息</h2>
            <div class="info-card" v-for="(account, index) in userInfo.accounts" :key="index">
              <div class="info-item">
                <span class="label">总账户价值：</span>
                <span class="value">{{ account.acctValueTot || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">现金余额：</span>
                <span class="value">{{ account.cashBalance || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">天数：</span>
                <span class="value">{{ account.days || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">交易金额：</span>
                <span class="value">{{ account.dealAmount || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">交易日期：</span>
                <span class="value">{{ account.dealDate || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">交易量：</span>
                <span class="value">{{ account.dealVolume || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">平均收益率：</span>
                <span class="value">{{ account.flatRot || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">基金总价值：</span>
                <span class="value">{{ account.fundValueTot || '暂无数据' }}</span>
              </div>
              <div class="info-item">
                <span class="label">利润：</span>
                <span class="value">{{ account.profit || '暂无数据' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userApi } from '../api'

const router = useRouter()
const route = useRoute()
const userId = ref(route.params.userId)
const userInfo = ref({})
const loading = ref(true)
const error = ref('')

const goBack = () => {
  router.push('/')
}

const fetchUserInfo = async () => {
  loading.value = true
  error.value = ''
  
  try {
    // 调用API获取用户投资建议信息
    const response = await userApi.getUserAdvice(userId.value)
    if (response) {
      // 处理返回的数据
      userInfo.value = {
        name: response.userName || '未知用户',
        userId: response.userId,
        fundCode: response.fundCode,
        fundName: response.fundName,
        curPrice: response.curPrice,
        latestPrice: response.latestPrice,
        priceDate: response.priceDate,
        simDate: response.simDate,
        startDate: response.startDate,
        days: response.days,
        weeks: response.weeks,

        // 账户信息
        accounts: response.accounts || [],
        // 投资建议
        advice: response.advice || {}
      }
    } else {
      error.value = '获取用户信息失败'
    }
  } catch (err) {
    console.error('获取用户信息失败:', err)
    error.value = '获取用户信息失败，请稍后再试'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-detail-container {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.back-button {
  background-color: #f0f0f0;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 20px;
}

.back-button:hover {
  background-color: #e0e0e0;
}

h1 {
  color: #333;
  margin: 0;
  flex-grow: 1;
}

.loading {
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.error-message {
  padding: 40px;
  color: #f44336;
}

.retry-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.info-column {
  flex: 1;
  min-width: 300px;
}

.left-column {
  flex: 0 0 350px;
}

.info-section {
  margin-bottom: 30px;
}

.info-section h2 {
  margin-bottom: 15px;
  color: #333;
  border-left: 4px solid #4CAF50;
  padding-left: 10px;
}

.sub-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.sub-section h3 {
  margin-bottom: 10px;
  color: #555;
  font-size: 16px;
  border-left: 3px solid #42b883;
  padding-left: 8px;
}

.info-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.info-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.label {
  font-weight: bold;
  width: 150px;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}

.status-active {
  color: #4CAF50;
}

.status-inactive {
  color: #f44336;
}
</style>